.top-bar {
  height: 190px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  line-height: 88px;
  overflow-x: clip;
  padding: 0 20px 0 20px;
  z-index: 999;
  font-family: biaoti;

  &>div {
    height: 100%;
  }

  .left,
  .right {
    width: 26%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .menu-item{
      width: 380px;
      height: 89px;
      background: linear-gradient(to bottom, #4299f36b, #2190f700);
      font-size: 41px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      cursor: pointer;
      span{
        background-image: linear-gradient(180deg, #A1ECFF 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        color: transparent;
        display: inline-block;
      }
    }
    .menu-item_active{
      background: linear-gradient(to bottom, #38BBFF, #2190f700);
    }
  }

  .right {
    padding-right: 68px;
    .menu-item{
      transform: skewX(-30deg);
      span{
        transform: skewX(30deg);
      }
    }
  }

  .left {
    padding-left: 68px;
    .menu-item{
      transform: skewX(30deg);
      span{
        transform: skewX(-30deg);
      }
    }
  }

  .center {
    width: 50%;
    flex: 1;
    text-align: center;

    font-size: 80px;
    font-family: biaoti;
    font-weight: 600;
    color: #FFFFFF;

    background: linear-gradient(0deg, #B9CFFF 0%, #FFFFFF 99.0478515625%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;

    .logout{
      width: 50px;
      height: 50px;
      background-image: url("@/assets/common/out.png");
      background-size: 100% 100%;
      position: relative;
      right: -16%;
      top: -15px;
      cursor: pointer;
    }
  }
}
